<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="modal-mask" ></div>
    <div class="head-container maxwidth">
      <!--      <div class="head-title">
              媒体报单
              <i class="el-icon-close"></i>
            </div> -->
      <el-form ref="form" :model="form" :rules="rules"  size="small" label-width="80px">
        <el-form-item label="活动编号">
          <el-input v-model="form.activityId" style="width: 270px;" disabled />
        </el-form-item>
        <el-form-item label="剩余额度">
          <el-input v-model="form.shengyuEdu" style="width: 270px;" disabled />
        </el-form-item>
        <el-form-item label="订单号"  prop="orderNo">
          <el-input v-model="form.orderNo" :rows="3" type="textarea"  placeholder="多个用逗号分割" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="订单时间" v-show="detailsList.swtime === '1'" ref="swtime"  :prop="'orderTime'">
          <el-date-picker v-model="form.orderTime" type="datetime" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="订单金额" v-show="detailsList.swamt === '1'"  ref="swamt"   :prop="'orderAmt'">
          <el-input v-model="form.orderAmt" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="出货价" v-show="detailsList.swshoujia === '1'"  ref="swshoujia"   :prop="'saleAmt'">
          <el-input v-model="form.saleAmt" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="数量" v-show="detailsList.swcount === '1'"  ref="swcount"   :prop="'orderCount'">
          <el-input v-model="form.orderCount" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="媒体编号">
          <el-input v-model="form.uid" style="width: 270px;" disabled />
        </el-form-item>
        <el-form-item label="快递单号" v-show="detailsList.swextra1 === '1'"  ref="swextra1"   :prop="'kddh'">
          <el-input v-model="form.kddh" placeholder="下我地址填商家发出的快递单号，下自己地址填转寄单号" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="微信号/QQ" v-show="detailsList.swuname === '1'"  ref="swuname"   :prop="'orderUname'">
          <el-input v-model="form.orderUname" style="width: 270px;" />
        </el-form-item>
        <el-form-item label="备注">
          <el-input v-model="form.extra1" style="width: 270px;" />
        </el-form-item>
        <!-- <el-form-item label="返利方式">
          <el-select v-model="form.payType" placeholder="请选择" style="width: 270px;">
            <el-option v-for="item in paytype" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付账号">
          <el-input v-model="form.payNo" style="width: 270px;" />
        </el-form-item>  -->
      </el-form>
      <div slot="footer" class="dialog-footer" ref="addsu" >
        <el-button  @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.status.cu === 2" type="primary" @click="fsubmit">确认</el-button>
      </div>
      <div  ref="addfa" style="display: none;">
        地址有误，无法提交
      </div>
    </div>
  </div>

</template>


<script>
import orderAdd from '@/api/activity/activityDetails'
import CRUD, { presenter, header, form, crud } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import Vue from 'vue'
import VueResource from 'vue-resource'
Vue.use(VueResource) ;

const defaultForm = { id: null, activityId: null, orderNo: null, orderType: null, orderDate: null, orderTime: new Date(), orderAmt: null, saleAmt: null, orderStatus: null, uid: null, orderUname: null, phone: null, createTime: null, lastUpdateTime: null, payType: null, payNo: null, pipei: null, extra1: null, extra2: null }
export default {
  name: 'orderAdd',
  components: { pagination, crudOperation, rrOperation, udOperation, VueResource },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  cruds() {
    return CRUD({ title: 'activity', url: 'api/activity/info', idField: 'id', query:{id:window.location.href.split('?')[1].split('=')[2]}, sort: 'id,desc', crudMethod: { ...orderAdd }})
  },
  data() {
    return {
      uid:null,
      paytype: [{value: '1', label: '微信' },{value: '2', label: '支付宝' },{value: '3', label: '银行卡' }],
      rules: {
        orderNo: [{ required: true, message: '订单编号不能为空', trigger: 'blur' }],
      }
    }
},
  methods: {
    // 钩子：在获取表格数据之前执行，false 则代表不获取数据
    // [CRUD.HOOK.beforeRefresh]() {
    //   return true
    // },

    _fenToYuan(row, col, cellValue) {
      if (typeof cellValue === 'undefined' || cellValue === null || cellValue === '') {
        return '0'
      } else {
        var num = Number(cellValue)
        if (!num) {
          return num + '.00'
        } else {
          num = Math.round((num) * 100) / 10000
          num = num.toFixed(2)
          num += ''
          var reg = num.indexOf('.') > -1 ? /(\d{1,3})(?=(?:\d{3})+\.)/g : /(\d{1,3})(?=(?:\d{3})+$)/g
          return num.replace(reg, '$1,')
        }
      }
    },
    fsubmit(){
      this.crud.findVM('form').$refs['form'].validate(valid => {
        if (!valid) {
          return
        }
        this.crud.doAdd() ;
        this.$confirm('报单成功了', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
            location.reload();
          })
          .catch(() => {location.reload();})
      })
    }
 },
  mounted() {
    let that = this;
    this.form.orderTime = new Date();
    this.$nextTick(() => {
      setTimeout(() => {
        let uid = this.$route.query.uid ;
        let aid = this.$route.query.aid ;
        if (typeof uid === 'undefined' || uid === null || uid === '') {
          this.$refs.addsu.style.display = 'none' ;
          this.$refs.addfa.style.display = 'block' ;
          return
        }
        if (typeof aid === 'undefined' || aid === null || aid === '') {
          this.$refs.addsu.style.display = 'none' ;
          this.$refs.addfa.style.display = 'block' ;
          return
        }

        that.$http.get("http://8.135.117.242:8083/api/activity/info?id="+aid).then(function(res){
          if (res.body.content.length<1){
            this.$refs.addsu.style.display = 'none' ;
            this.$refs.addfa.style.display = 'block' ;
            return
          }
          this.form.activityId = aid;
          this.form.shengyuEdu = res.body.content[0].shengyuEdu;
          this.form.uid = uid;
          that.detailsList = res.body.content[0] ;


          //that.detailsList = that.crud.data.length>0?that.crud.data[0]:JSON.parse(sessionStorage.getItem('dataArray'))[0];
          console.log(that.detailsList);

          let orderTime = [{ required: true, message: '订单时间不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swtime === '1'){
            this.$set(this.rules,'orderTime',orderTime) ;
          }
          let orderAmt = [{ required: true, message: '订单金额不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swamt === '1'){
            this.$set(this.rules,'orderAmt',orderAmt) ;
          }

          let saleAmt = [{ required: true, message: '销售金额不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swshoujia === '1'){
            this.$set(this.rules,'saleAmt',saleAmt) ;
          }

          let orderCount = [{ required: true, message: '数量不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swcount === '1'){
            this.$set(this.rules,'orderCount',orderCount) ;
          }


          let kddh = [{ required: true, message: '快递单号不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swextra1 === '1'){
            this.$set(this.rules,'kddh',kddh) ;
          }

          let orderUname = [{ required: true, message: '微信号不能为空', trigger: 'blur' }] ;
          if(that.detailsList.swuname === '1'){
            this.$set(this.rules,'orderUname',orderUname) ;
          }

        })

      }, 1)
    });
  }
}
</script>

<style scoped lang="scss">
.app-container{
  padding: 0;
}
.head-title{
  padding-bottom: 33px;
  margin-top: -5px;
  overflow: hidden;
  i{
    float: right;
  }
}
.modal-mask{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 700px;
  opacity: .5;
  background: #000;
  z-index: -2002;
}
.maxwidth{
  width: 100%;
}
.head-container{
  // height: 580px; //有标题头部
  position: absolute;
  left: 0;
  top: 0;
  right:0;
  bottom: 0;
  margin: auto;
  background: #ffffff;
  padding: 30px 20px;
  box-sizing: border-box;
}
.dialog-footer{
  text-align: right;
  margin-top: 45px;
}
@media (min-width: 576px){
  .maxwidth{
    width: 400px;
  }
}

</style>
